<html>
  <head>
    <title>My Google Contacts List</title>
	<link rel="stylesheet" type="text/css" href="chmbrs.css"/>
	<style type="text/css">
		body {
			font: 12px 'Myriad Pro', 'Tw Cen MT', Arial, Verdana, sans-serif;
			color: #666666;
			overflow-x: hidden;
			padding: 0px;
			margin: 8px 8px 8px;
			min-width: 600px;
			font-family: arial, sans-serif;
			background-color:#fff;
			font-size: small;
		}
		ul{
			list-style:none;
			padding:0;
			margin:.4em 0 0 0;
		}
		p{
			margin: 1em 0 0 25px;
			padding:0;
		}
	</style>
	<script type="text/javascript">
		var ggroups = {};
		var gcontacts ={};
	
		var bgPage = chrome.extension.getBackgroundPage();
		var contact = null;
		var email = null;
		
		function init()
		{
			//alert('starting process..');
			bgPage.oauth.authorize(function() {
				ggroups.getContactGroups();
			});
		}
		
		ggroups.getContactGroups = function(opt_url) 
		{
			var params = {
				'headers': {
					'GData-Version': '3.0'
				}
			};
			bgPage.groups = []; // Clear document list. We're doing a refresh.
			url = bgPage.GROUPLIST_FEED;
			params['parameters'] = {
				'alt' : 'json',
				'max-results' : 1000
			};
			//alert('getting contacts...');
			bgPage.oauth.sendSignedRequest(url, ggroups.processGroupListResults, params);
		};

		ggroups.processGroupListResults = function(text, xhr) 
		{
			var data = JSON.parse(text);
			for (var i = 0, entry; entry = data.feed.entry[i]; i++) 
			{
				var group = {
					'name' : entry['title']['$t'],
					'id' : entry['id']['$t'],
				};
				bgPage.groups.push(group);
			}
			//alert ('getting results ');
			ggroups.renderGroupList();
		};
		
		ggroups.renderGroupList = function()
		{
			var newGroupList = document.createElement('ul');
			for (var i = 0, group; group = bgPage.groups[i]; i++) 
			{
				var ContactsGroup = document.createElement('li');
				ContactsGroup.id = 'chmbrs-group-' + i;
				var contactsGroupSelector = document.createElement('a');
				contactsGroupSelector.setAttribute('href', 'javascript:gcontacts.displayContactGroup(\'' 
				+ group['id'] + '\', \'' + ContactsGroup.id + '\')');
				
				contactsGroupSelector.appendChild(document.createTextNode(group['name']));
				ContactsGroup.appendChild(contactsGroupSelector);
				newGroupList.appendChild(ContactsGroup);
			}
			var groupsPane = document.getElementById('chmbrs_groups_pane');
			var oldGroupsList = document.getElementById('chmbrs_groups');
			groupsPane.replaceChild(newGroupList, oldGroupsList);
			//alert(bgPage.contacts.length);
		};
		
		gcontacts.displayContactGroup = function(groupId, elementId) 
		{
			var selector = document.getElementById(elementId);
			var params = {
				'headers': {
					'GData-Version': '3.0'
				}
			};
			bgPage.contacts = []; // Clear document list. We're doing a refresh.
			url = bgPage.CONTACTLIST_FEED;
			params['parameters'] = {
				'alt' : 'json',
				'max-results' : 1000,
				'group': groupId
			};	
			//alert('getting contacts...' + groupId);
			bgPage.oauth.sendSignedRequest(url, gcontacts.processContactListResults, params);
		};
		
		gcontacts.processContactListResults = function(text, xhr) 
		{
			var data = JSON.parse(text);
			for (var i = 0, entry; entry = data.feed.entry[i]; i++) 
			{
				var contact = {
					'name' : entry['title']['$t'],
					'id' : entry['id']['$t']
				};
				if (!contact['name']) 
				{
					contact['name'] = contact['emails'][0] || "<Unknown>";
				}
				bgPage.contacts.push(contact);
			}
			//alert ('getting results ');
			gcontacts.renderContactList();
		};
		
		gcontacts.renderContactList = function()
		{
			//alert(bgPage.contacts.length);
			var newContactList = document.createElement('ul');
			newContactList.id = "chmbrs_contacts";

			for (var i = 0, contact; contact = bgPage.contacts[i]; i++) 
			{
				var contactList = document.createElement('li');
				contactList.id = 'chmbrs-contact-' + i;
				var contactsSelector = document.createElement('a');
				contactsSelector.setAttribute('href', 'javascript:gcontacts.showContactDetails(\'' + contact['id'] + '\', \'' + 
				contactList.id + '\')');
				
				contactsSelector.appendChild(document.createTextNode(contact['name']));
				contactList.appendChild(contactsSelector);
				newContactList.appendChild(contactList);
				//alert(contact['name']);
			}
			var contactsPane = document.getElementById('chmbrs_contacts_pane');
			var oldContactsList = document.getElementById('chmbrs_contacts');
			contactsPane.replaceChild(newContactList, oldContactsList);
		};
		
		gcontacts.showContactDetails = function(atomId, elementId) 
		{
			//alert(elementId);
			var selector = document.getElementById(elementId);
			
			var params = {
				'headers': {
					'GData-Version': '3.0'
				}
			};
			url = atomId;
			params['parameters'] = {
				'alt' : 'json'
			};	
			bgPage.oauth.sendSignedRequest(url, gcontacts.processContactDetails, params);
		};
		
		gcontacts.processContactDetails = function(text, xhr)
		{
			var data = JSON.parse(text);
			// Create a new div to hold the user's info
			var newPanel = document.createElement('div');
			newPanel.id = "chmbrs_info_pane";
			
			 // Output the user's name and position
			var personalInfo = document.createElement('div');
			personalInfo.className = 'chmbrs_info_block';
			
			var name = data.entry['title'];
			if (name && name['$t']) 
			{
				var nameP = document.createElement('p');
				nameP.className = 'chmbrs_info_title';
				nameP.appendChild(document.createTextNode(name['$t']));
				personalInfo.appendChild(nameP);
			}
			
			//list of emails
			var emails = data.entry['gd$email'];
			if(emails)
			{
				for (var i = 0, email; email = emails[i]; i++) 
				{
					var emailP = document.createElement('p');
					var emailA = document.createElement('a');
					var emailTxt = email['address'];
					emailA.setAttribute('href', 'mailto:' + emailTxt);
					emailA.appendChild(document.createTextNode(emailTxt)),
					emailP.appendChild(emailA);
					personalInfo.appendChild(emailP);
				}
			}
			
			newPanel.appendChild(personalInfo);
			
			// List the contact's telephone information
			var telephoneInfo = document.createElement('div');
			telephoneInfo.className = "chmbrs_info_block";
			
			var phones = data.entry['gd$phoneNumber'];
			if(phones)
			{
				for (var i=0, phone; phone = phones[i]; i++)
				{
					var phoneP = document.createElement("p");
					var phoneTxt = phone['$t'];
					var phoneType = 0;
					if(phone['label'])
					{
						phoneType = phone['label'];
					}
					else if(phone['rel'])
					{
						phoneType=phone['rel'];
						phoneType = phone['rel'].substring(33, phoneType.length);
					}
					phoneP.appendChild(document.createTextNode(phoneTxt + ' ' + phoneType));
					
					telephoneInfo.appendChild(phoneP);
				}
				newPanel.appendChild(telephoneInfo);
			}
		
			// Update the contacts view
			var infoContainer = document.getElementById("chmbrs_info_container");
			var oldPanel = document.getElementById("chmbrs_info_pane");
			infoContainer.replaceChild(newPanel, oldPanel);
		};
		
		function logout()
		{
			chrome.extension.getBackgroundPage().logout();
			window.close();
		};
    </script>
  </head>
	<body onload="init()">
		<table border='0'>
			<tr>
				<td valign="top">
					<img src='http://www.google.com/contacts/c/static/images/644295228-GoogleContactsLogo.gif' alt='google contacts'/>
				</td>
				<td width="100%" valign="top" align="right">
					<a href="#" onclick="window.close()">
						<img src="popup_close.png" style="margin: 2px;">
					</a>
				</td>
			</tr>
		</table>
		<div id="chmbrs_container">
			<div id='chmbrs_header_pane'>
			  <p id='chmbrs_title'>Google Contacts</p>
			</div>
			<div id='chmbrs_groups_container'>
				<div id='chmbrs_groups_pane' class='chmbrs_column'>
					<ul id='chmbrs_groups'></ul>
				</div>
			</div>
			<div id='chmbrs_contacts_container'>
				<div id='chmbrs_contacts_pane' class='chmbrs_column'>
					<ul id='chmbrs_contacts'></ul>
				</div>
			</div>
			<div id='chmbrs_info_container'>
				<div id='chmbrs_info_pane' class='chmbrs_column'></div>
			</div>
			<div id='chmbrs_footer_pane'>
				<p align='right' id='chmbrs_logout'>
					<a href="#" onclick="chrome.tabs.create({url:'https://www.google.com/voice/b/0/#inbox'})">
						Go to My Google Voice &raquo;
					</a>
					<!--<a href='javascript:logout()'>
						&raquo; Logout
					</a>-->
				</p>
			</div>
		</div>
	</body>
</html>
